<template>
  <div class="content">
    <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="6">
          <a-form-item label="选择楼盘">
            <a-select v-decorator="['property']">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="楼宇">
            <a-select v-decorator="['buildings']">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="单元/楼层">
            <a-select v-decorator="['units']">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="房间">
            <a-select v-decorator="['rooms']">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-form-item label="申请人">
            <a-input v-decorator="['applicant']" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="装修内容">
            <a-input v-decorator="['please_repair_content']" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="申请日期(自)">
            <a-date-picker
              type="date"
              placeholder="Pick a date"
              style="width: 100%;"
              v-decorator="['date_of_application_start']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="申请日期(至)">
            <a-date-picker
              type="date"
              placeholder="Pick a date"
              style="width: 100%;"
              v-decorator="['date_of_application_end']"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="table-content">
        <a-form-item :wrapperCol="{span: 24}">
          <a-row class="setting">
            <a-col class="left">
              <a-button type="primary" icon="search" @click="search">查询</a-button>
              <a-button type="primary" icon="reload">重置</a-button>
            </a-col>
            <a-col class="right">
              <a-input></a-input>
              <a-button type="primary">定位房间</a-button>
            </a-col>
          </a-row>
        </a-form-item>
        <my-table :columns="columns" :data="data" :pagination="pagination"></my-table>
      </a-row>
    </a-form>
    <add :visibleObj="visibleObj"></add>
  </div>
</template>

<script>
import _ from 'lodash'
import mockjs2 from 'mockjs2'
import add from './enter-add/add'
import myTable from '@/components/myTable/myTable'
const columns = [
  {
    align: 'center',
    title: '编号',
    dataIndex: 'key',
    width: '5%',
    key: 'key',
    fixed: 'left'
  },
  {
    align: 'center',
    title: '房产',
    dataIndex: 'estate',
    width: '8%',
    key: 'estate'
  },
  {
    align: 'center',
    title: '申请人',
    width: '8%',
    dataIndex: 'applicant',
    key: 'applicant'
  },
  {
    align: 'center',
    title: '申请日期',
    width: '8%',
    dataIndex: 'dateofapplication',
    key: 'dateofapplication'
  },
  {
    align: 'center',
    title: '装修保证金',
    width: '8%',
    dataIndex: 'decorationdeposit',
    key: 'decorationdeposit'
  },
  {
    align: 'center',
    title: '违约金',
    width: '8%',
    dataIndex: 'liquidateddamages',
    key: 'liquidateddamages'
  },
  {
    align: 'center',
    title: '状态',
    width: '8%',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    align: 'center',
    title: '装修内容',
    dataIndex: 'decorationcontent',
    key: 'decorationcontent'
  },
  {
    width: '10%',
    align: 'center',
    title: '创建人',
    dataIndex: 'approver',
    key: 'approver'
  },
  {
    align: 'center',
    title: '审批时间',
    width: '8%',
    key: 'processingtime',
    dataIndex: 'processingtime'
  },
  {
    width: '8%',
    align: 'center',
    title: '标识',
    key: 'mark',
    dataIndex: 'mark'
  }
]
const data = []
for (let i = 0; i < 10; i++) {
  data.push({
    key: i + 1,
    estate: '中东首座1号楼1单元103室',
    applicant: mockjs2.Random.cname(),
    dateofapplication: mockjs2.Random.date('yyyy-MM-dd'),
    decorationdeposit: _.random(100000, 999999),
    liquidateddamages: 0,
    status: ['审批通过'],
    // decorationcontent: '将客厅非承重墙打掉，增加采光',
    decorationcontent: _.sample(
      [
        '申请对客厅和卫生间精装修一下',
        '将客厅非承重墙打掉，增加采光',
        '申请对厨房翻修一下',
        '收房后整体装修',
        '打一个隔断和作一个飘窗',
        '申请重新翻修地板'
      ],
      1
    ),
    approver: '物业企业版用户',
    processingtime: mockjs2.Random.datetime(),
    mark: '物业人员录入'
  })
}
console.log(data)
export default {
  data() {
    return {
      labelCol: { lg: { span: 8 }, sm: { span: 8 } },
      wrapperCol: { lg: { span: 16 }, sm: { span: 16 } },
      columns,
      data,
      form: this.$form.createForm(this),
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      visibleObj: {
        addvisible: false
      }
    }
  },
  methods: {
    search(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    }
  },
  components: {
    add,
    myTable
  }
}
</script>

<style lang='less' scoped>
.content {
  .table-content {
    .setting {
      margin: 10px 0;
    }

    button {
      margin-left: 10px;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
      input {
        width: 100px;
      }
    }
  }
}
.ant-form-item {
  margin-bottom: 0px;
}
</style>
